<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="./main.css">
		<script src="./main.js"></script>
		<title>原生js轮播组件</title>
		<style>
			#test1 {
				margin: 20px auto;
				display: flex;
				justify-content: center;
			}
			#test2 {
				margin: 0px auto;
				display: flex;
				justify-content: center;
			}
			.operation {
				position: fixed;
				right: 40px;
				top: 40px;
				display: flex;
				flex-direction: column;
			}
			.operation .item {
				color: #999;
				margin-bottom: 20px;
				font-size: 18px;
			}
			.operation .item input {
				font-size: 14px;
				height: 35px;
				padding: 0px 10px;
				color: #000;
				border: 1px solid #E4E8EB;
			}
			.operation .item input[type=text]:focus {
				border-color: red;
			}
			
			.submit {
				background-color: #4E6EF2;
				height: 40px;
				width: 80px;
				color: #fff;
				border: none;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 6px;
				margin: 0 auto;
				cursor: pointer;
			}
			.flex_x {
				display: flex;
				align-items: center;
			}
		</style>
	</head>
	<body>
		<div id="test1"></div>
		
		<div class="operation">
			<form name="form" onsubmit="return false" id="form">
				
				<div class="item">
					大图宽度：<input type="text" value="840" name="width" id="">
				</div>
				
				<div class="item">
					大图高度：<input type="text" value="400" name="height" id="">
				</div>
				
				<div class="item">
					小图宽度：<input type="text" value="200" name="minWidth" id="">
				</div>
				
				<div class="item">
					小图高度：<input type="text" value="200" name="minHeight" id="">
				</div>
				
				<div class="item flex_x">
					是否显示索引：
					<div class="flex_x">
						<input type="radio" name="indexShow" value="true" checked="checked">是
						<input type="radio" name="indexShow" value="false">否
					</div>
				</div>
				
				 <input type="submit" class="submit" value="确定">
				<!-- <button onClick="operationChange">确定</button> -->
			</form>
			
			
		</div>
		<!-- <div id="test2"></div> -->
		
	</body>

	
	<script>

		// alert(91)
		let width = 840// 大图宽度
		let height = 400// 大图高度
		let minWidth = 200
		let minHeight = 200
		let indexShow = true// 是否显示索引
		
		const init = () => {
			new XjSwiper({
				name: '#test1',// 初始化放在那个 盒子里
				width: width,// 大图宽度
				height: height,// 大图高度
				minWidth: minWidth,
				minHeight: minHeight,
				iconSize: '38px',
				borderRadius: '12px',
				minBorderRadius: '6px',
				activeBorder: '1px solid OrangeRed',
				label: 'url',// 图片地址对应的key
				indexShow: indexShow,// 是否显示索引
				maxClick: (e) => { // 大图点击事件
					console.log(e)
					alert('拿到对应图片对应的值' +  JSON.stringify(e))
				},
				swiperList: [{ // 要渲染的图片集合
						url: 'https://img2.baidu.com/it/u=3501073385,2187239768&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800',
						id: 1
					},
					{
						url: 'https://img1.baidu.com/it/u=255055538,1907785482&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281',
						id: 2
					},
					{
						url: 'https://img1.baidu.com/it/u=4016298401,2504682634&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
						id: 3
					},
					{
						url: 'https://img0.baidu.com/it/u=3426033326,2219312222&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
						id: 4
					},
					{
						url: 'https://img2.baidu.com/it/u=2415552731,2283562269&fm=253&fmt=auto&app=138&f=JPEG?w=909&h=500',
						id: 5
					},
					{
						url: 'https://img1.baidu.com/it/u=1605341541,1182642759&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750',
						id: 6
					},
					{
						url: 'https://img1.baidu.com/it/u=1960110688,1786190632&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281',
						id: 7
					}
				],
				
			
			
			}).initSwiper()
		
		}
		init()
		
		var fm = document.querySelector("#form")
		// var fm = document.forms['form'];
		fm.onsubmit = (e) => {
			console.log(e)
			let formData = new FormData(e.target);
			
			width = parseFloat(formData.get('width'))
			height = parseFloat(formData.get('height'))
			minWidth = parseFloat(formData.get('minWidth'))
			minHeight = parseFloat(formData.get('minHeight'))
			console.log(formData.get('indexShow'))
			indexShow = JSON.parse(formData.get('indexShow'))
			
			init()
			return false
			
		}
		
		// new XjSwiper({
		// 	name: '#test2',// 初始化放在那个 盒子里
		// 	width: 280,// 大图宽度
		// 	height: 250,// 大图高度
		// 	num: 1,
		// 	// minWidth: 80,
		// 	// minHeight: 80,
		// 	label: 'url',// 图片地址对应的key
		// 	swiperList: [{ // 要渲染的图片集合
		// 			url: 'https://img2.baidu.com/it/u=3501073385,2187239768&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800',
		// 			id: 1
		// 		},
		// 		{
		// 			url: 'https://img1.baidu.com/it/u=255055538,1907785482&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281',
		// 			id: 2
		// 		},
		// 		{
		// 			url: 'https://img1.baidu.com/it/u=4016298401,2504682634&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
		// 			id: 3
		// 		},
		// 		{
		// 			url: 'https://img0.baidu.com/it/u=3426033326,2219312222&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
		// 			id: 4
		// 		}
		// 	]
		
		
		// }).initSwiper()
		//obj.initSwiper()
	</script>
</html>
